<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="天地图" />
		<title>天地图－地图API－范例－画面</title>
		<!-- tk=67086d004b94f495f0251b5bcc1ef26d -->
		<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0">
		</script>
		<style type="text/css">
			body,
			html {
				width: 100%;
				height: 100%;
				margin: 0;
				font-family: "Microsoft YaHei"
			}

			#mapDiv {
				width: 100%;
				height: 100%
			}

			input,
			b,
			p {
				margin-left: 5px;
				font-size: 14px
			}
		</style>
		<script>
			var map;
			var zoom = 6;
			//图层
			var lay;
			var layT;
			//如果设置了每个覆盖物的tag，则表示地图上添加的所有的覆盖物的集合，
			//如果没有使用tag标签，则表示最后添加的一个覆盖物的引用
			var polygonMap = new Map();
			var lineMap = new Map();

			//地图放大
			function zoomToLarge() {
				map.zoomIn();
			}

			//地图缩小
			function zoomToSmall() {
				map.zoomOut();
			}

			//缩放到指定级别
			function zoomTo(level) {
				map.setZoom(level);
			}

			//添加标注
			function addMarker(lng, lat) {
				//创建图片对象
				var icon = new T.Icon({
					iconUrl: "marker.png",
					iconSize: new T.Point(40, 40)
				});
				//向地图上添加自定义标注
				var marker = new T.Marker(new T.LngLat(lng, lat), {
					icon: icon
				});
				map.addOverLay(marker);
			}

			//添加圆点覆盖
			function addPoint(lng, lat) {
				var circle = new T.Circle(new T.LngLat(lng, lat), 100, {
					color: "blue",
					weight: 2,
					opacity: 1,
					fillColor: "#FFFFFF",
					fillOpacity: 1,
					lineStyle: "solid"
				});
				//向地图上添加圆
				map.addOverLay(circle);
			}

			//获取地图中心点坐标
			function getCenter() {
				return map.getCenter().getLng() + "#" + map.getCenter().getLat();
			}

			//获取地图缩放级别
			function getZoom() {
				return map.getZoom();
			}

			//画线
			function drawLine(points = [], color = "blue", weight = 5, isEdit = false, tag = "line") {

				var linePoints = [];

				points.forEach(item => {
					linePoints.push(new T.LngLat(item["lng"], item["lat"]));
				});

				//创建线对象
				var line = new T.Polyline(linePoints, {
					color: color,
					weight: weight,
				});
				//是否允许编辑
				if (isEdit) {
					line.enableEdit();
				}
				lineMap.set(tag, line);
				//向地图上添加线
				map.addOverLay(line);
			}

			//添加平面覆盖物
			function drawArea(points = [], color = "blue", weight = 5, opacity = 0.5, fillColor = "#FFFFFF", fillOpacity = 0.5,
				isEdit = false, tag = "polygon") {
				var polygonPoints = [];

				points.forEach(item => {
					polygonPoints.push(new T.LngLat(item["lng"], item["lat"]));
				});

				//创建面对象
				var polygon = new T.Polygon(polygonPoints, {
					color: color,
					weight: weight,
					opacity: opacity,
					fillColor: fillColor,
					fillOpacity: fillOpacity
				});
				//是否允许编辑
				if (isEdit) {
					polygon.enableEdit();
				}
				polygonMap.set(tag, polygon);
				//向地图上添加面
				map.addOverLay(polygon);
			}

			//清空地图上所有的覆盖物
			function clearAllLayer() {
				map.clearOverLays();
			}

			//根据tag获取平面的所有的点
			function geAreaPointsByTag(tag = "polygon") {
				JsFun.setAreaPoints(JSON.stringify(polygonMap.get(tag).getLngLats()));
			}

			//隐藏元素
			function hideOverLayByTag(tag = "tag") {
				if (lineMap.get(tag) != null) {
					lineMap.get(tag).hide();
				}
				if (polygonMap.get(tag) != null) {
					polygonMap.get(tag).hide();
				}
			}
			//显示元素
			function showOverLayByTag(tag = "tag") {
				if (lineMap.get(tag) != null) {
					lineMap.get(tag).show();
				}
				if (polygonMap.get(tag) != null) {
					polygonMap.get(tag).show();
				}
			}

			//根据经纬度的点获取面积
			function getArea(points = []) {
				var polygonPoints = [];

				points.forEach(item => {
					polygonPoints.push(new T.LngLat(item["lng"], item["lat"]));
				});

				//创建标注工具对象
				var polygonTool = new T.PolygonTool(map);

				var area = polygonTool.getArea(polygonPoints);

				JsFun.getArea(parseInt(area));
			}

			//设置地图中心位置
			function setCenter(lng, lat, zoom) {
				map.centerAndZoom(new T.LngLat(lng, lat), zoom);
			}

			//添加地图点击事件
			function addMapClick() {
				removeMapClick();
				map.addEventListener("click", MapClick);
			}

			//移除地图点击事件
			function removeMapClick() {
				map.removeEventListener("click", MapClick);
			}

			//地图点击回调
			function MapClick(e) {
				JsFun.onMapClick(e.lnglat.getLng().toString(), e.lnglat.getLat().toString());
			}

			//为添加的Polygon覆盖物添加点击事件
			function addPolygonClick() {
				for (var [tag, polygon] of polygonMap) {
					//移除面的点击事件，防止多次注册
					removePolygonClick(tag);
					//注册面的点击事件
					polygon.addEventListener("click", PolygonClick);
				}
			}

			function removePolygonClick(tag) {
				//移除面的点击事件
				polygonMap.get(tag).removeEventListener("click", PolygonClick);
			}

			function PolygonClick(e) {
				for (var [tag, polygon] of polygonMap) {
					if (polygon == e.target) {
						JsFun.polygonClick(tag);
					}
				}
			}

			//infoWindow的点击事件,已测试通过
			function clickInfoWindow(tag) {
				JsFun.infoWindowClick(tag);
			}

			//添加infoWindow
			function addInfoWindow(lng, lat, msg, desc, tag) {
				var lnglat = new T.LngLat(lng, lat);
				var html = "<div id=\"div\" onclick=\"clickInfoWindow('" + tag + "')\"> <font size=\"6\">" + msg +
					"<font size=\"6\" color = 0x77B16E>" + desc;

				// var content = '<font size="6">' + msg
				//创建信息窗口对象
				var minWidthNum = 50;
				if (msg.length + desc.length >= 13) {
					minWidthNum = 300 + (msg.length + desc.length - 10) * 20;
				}
				var infoWin = new T.InfoWindow(html, {
					minWidth: minWidthNum,
					closeButton: false
				});
				infoWin.setLngLat(lnglat);
				//向地图上添加信息窗口
				map.addOverLay(infoWin);
			}

			//地图加载
			function onLoad() {
				// window.alert(getQueryVariable("tk"));
				//影像地图图层
				var imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
					"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
					"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
					"&tk=" + getQueryVariable("tk");

				// 影像注记url
				var imageURLT = "http://t0.tianditu.gov.cn/cia_w/wmts?" +
					"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
					"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
					"&tk=" + getQueryVariable("tk");

				//创建自定义图层对象
				lay = new T.TileLayer(imageURL, {
					minZoom: 1,
					maxZoom: 18
				});
				layT = new T.TileLayer(imageURLT, {
					minZoom: 1,
					maxZoom: 18
				});
				var config = {
					layers: [lay, layT]
				};

				//初始化地图对象
				map = new T.Map("mapDiv", config);
				//设置显示地图的中心点和级别
				map.centerAndZoom(new T.LngLat(113.629726, 34.786002), zoom);

				//测试面的点击事件
				// map.centerAndZoom(new T.LngLat(116.41136, 39.97569), 12);
				// var points = [];
				// points.push(new T.LngLat(116.41136, 39.97569));
				// points.push(new T.LngLat(116.411794, 39.9068));
				// points.push(new T.LngLat(116.32969, 39.92940));
				// points.push(new T.LngLat(116.385438, 39.90610));
				// drawArea(points);
				// addPolygonClick();

				//测试方法，为了测试可用性，没必要删除
				// addMapClick();
				// drawLine();
				// drawArea();
				// addInfoWindow(113.629726, 34.786002, "测试一下测试一试试试试试试", " 1亩", "123456");
				// addInfoWindow(112.529726, 34.786002, "测试一下");
				//地图加载完成回调

				//添加自定义marker的时候可以设置base64直接设置，可直接在Icon的imageUrl中设置，例：
				// 'data:image/png;base64,(注：前面为固定格式，后面为image的base64编码)iVBORw0'
				JsFun.onMapLoadComplete();
			}

			//获取请求链接的参数
			function getQueryVariable(variable) {
				var query = window.location.search.substring(1);
				var vars = query.split("&");
				for (var i = 0; i < vars.length; i++) {
					var pair = vars[i].split("=");
					if (pair[0] == variable) {
						return pair[1];
					}
				}
				return "67086d004b94f495f0251b5bcc1ef26d";
			}
		</script>

		<style>
			.mapBG {
				height: 100vh;
				background:
					linear-gradient(to right, #E6E6E6 1px, transparent 1px),
					linear-gradient(to bottom, #E6E6E6 1px, transparent 1px);
				background-repeat: repeat;
				/* 默认为 repeat */
				background-size: 40px 40px;
			}

			.mapImageBG {
				background: #fff url(bgMap.jpeg) repeat fixed center;
				background-size: 300px;
			}
		</style>

	</head>
	<body onLoad="onLoad()">
		<div id="mapDiv" class="mapImageBG"></div>
	</body>
</html>
